<template>
	<view class="loan">
		<navbar title="贷款利率"></navbar>
		<view style="padding: 20rpx 30rpx;">
			<view class="title bold">基准利率</view>
			<view class="subtitle">(LPR由中国人民银行于2022年8月22日发布)</view>
			<view class="subtitle">(公积金贷款利率于2022年10月1日实施)</view>
			<view class="nav">
				<view class="acea-row bottom">
					<view class="top right">公积金贷款</view>
					<view class="top">LPR</view>
				</view>
				<view class="acea-row bottom bold">
					<view class="son right">贷款期限</view>
					<view class="son right">利率</view>
					<view class="son right">期限</view>
					<view class="son">LPR</view>
				</view>
				<view class="acea-row bottom">
					<view class="item right">5年以内（含5年）</view>
					<view class="item right">2.6%</view>
					<view class="item right">1年期</view>
					<view class="item">3.65%</view>
				</view>
				<view class="acea-row bottom">
					<view class="item right">5年以上</view>
					<view class="item right">3.1%</view>
					<view class="item right">5年期</view>
					<view class="item">4.3%</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import navbar from '../../components/navbar.vue'
	export default {
		components:{
			navbar
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	page{ background-color: #ffffff !important; }
	.loan{
		
		.title{
			font-size: 36rpx;
			color: #010101;
		}
		.subtitle{
			color: #999999;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
		.nav{
			width: 690rpx;
			border-radius: 10rpx;
			border: 1rpx solid #f5f5f5;
			box-sizing: border-box;
			font-size: 28rpx;
			overflow: hidden;
			margin-top: 15rpx;
			
			.top{
				width: 50%;
				line-height: 80rpx;
				text-align: center;
				background-color: #EBF2FF;
				color: #010101;
			}
			.son{
				width: 25%;
				line-height: 80rpx;
				text-align: center;
				background-color: #EBF2FF;
				color: #010101;
			}
			.item{
				width: 25%;
				text-align: center;
				color: #010101;
				padding: 20rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.right{
			border-right: 1rpx solid #f5f5f5;
		}
		.bottom{
			border-bottom: 1rpx solid #f5f5f5;
		}
		
	}

</style>
